<template>
  <div class="materialfunc">
    <div class="searchbox">
      <input type="text" placeholder="输入关键词,按enter键搜索">
    </div>
    <div class="materialcont">
      <a href="#">我的收藏</a>
      <a href="#">热门素材</a>
      <a href="#">图片框架</a>
      <a href="#">图标</a>
      <a href="#">图表</a>
      <a href="#">插图</a>
      <a href="#">形状</a>
      <a href="#">线&箭头</a>
      <a href="#">免抠素材</a>
    </div>
  </div>
</template>

<script>
    
</script>

<style scoped>
.materialfunc{position: fixed;width:330px;height: 100%; background: #fff;z-index: 999}
.searchbox{width: 280px;height: 40px;background: #f3f3f3;margin: 15px auto;border-radius: 20px;overflow: hidden;}
.searchbox input{display: block; border: 0;margin: 0;padding: 0;height: 40px;line-height: 40px;width: 200px;padding-left: 50px;background: url(../assets/images/searchicon.png) no-repeat 20px center #f3f3f3;color: #bdbdbd;font-size: 13px;}
.materialcont{width:300px;margin:0 auto;overflow: hidden; }
.materialcont a{float: left;width: 66px;height: 30px;line-height: 30px; padding-top: 66px;text-align: center;font-size: 13px;color: #696969;margin: 17px;}
.materialcont a:nth-child(1){background: url(../assets/images/micon1.png) no-repeat center top;}
.materialcont a:nth-child(2){background: url(../assets/images/micon2.png) no-repeat center top;}
.materialcont a:nth-child(3){background: url(../assets/images/micon3.png) no-repeat center top;}
.materialcont a:nth-child(4){background: url(../assets/images/micon4.png) no-repeat center top;}
.materialcont a:nth-child(5){background: url(../assets/images/micon5.png) no-repeat center top;}
.materialcont a:nth-child(6){background: url(../assets/images/micon6.png) no-repeat center top;}
.materialcont a:nth-child(7){background: url(../assets/images/micon7.png) no-repeat center top;}
.materialcont a:nth-child(8){background: url(../assets/images/micon8.png) no-repeat center top;}
.materialcont a:nth-child(9){background: url(../assets/images/micon9.png) no-repeat center top;}
</style>

